<template>
    <div class="content-wrapper">
        <div class="list flex">
            <!-- 项目信息 -->
            <div class="product-wrapper">
                <div class="table-title">项目概览</div>
            </div>
            <!-- 日期信息 -->
            <div class="date-wrapper flex-1">
                <div class="date-list flex">
                    <div :style="state.currentDayStyle" class="current-day"> 今天 </div>
                    <!-- 循环月份 -->
                    <div v-for="dateItem in state.dateList" :key="dateItem.date">
                        <div class="date-title header">
                            {{ dateItem.date }}
                        </div>
                        <div class="date-info" v-for="(projectItem, projectIndex) in state.list">
                            <div class="flex" v-if="projectIndex===0">
                                <!-- 表头日期 -->
                                <div v-for="item in dateItem.days" :key="item" class="date-item bgcolor">
                                    {{ item }}
                                </div>
                            </div>
                            <table >
                                <tr v-for="index in 28" :key="index">
                                    <td
                                        v-for="item in dateItem.days"
                                        :key="item"
                                        class="content-item"
                                        :class="
                                            computedClass(index, item, dateItem.date, projectItem, projectIndex)
                                                .className
                                        "
                                        :colspan="
                                            computedClass(index, item, dateItem.date, projectItem, projectIndex).colspan
                                        "
                                    >
                                        <a-tooltip>
                                            <template #title>
                                                {{ `这里是提示信息${dateItem.date}` }}
                                            </template>
                                            <span class="table-text header">{{
                                                computedClass(index, item, dateItem.date, projectItem, projectIndex)
                                                    .text
                                            }}</span>
                                        </a-tooltip>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { reactive, onMounted, nextTick, computed } from 'vue'
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import moment from 'moment'

    const state = reactive({
        list: [
            {
                id: 1,
                productName: '项目1',
                children: [
                    // 这里是表格进度了
                    {
                        milepostName: '准备工作', // 类型： 准备工作、启动工作、数据预处理等八个枚举
                        startTime: '2024-05-01',
                        endTime: '2024-05-22',
                        finishProgress: 50,
                        costProgress: 20
                        // alterEndTime: '2024-06-24' //可以为空
                    },
                    {
                        milepostName: '启动工作',
                        startTime: '2024-05-21',
                        endTime: '2024-06-19',
                        finishProgress: 50,
                        costProgress: 80
                    },
                    {
                        milepostName: '数据预处理',
                        startTime: '2024-05-30',
                        endTime: '2024-06-12',
                        finishProgress: 10,
                        costProgress: 30
                    },
                    {
                        milepostName: '产品确认',
                        startTime: '2024-05-31',
                        endTime: '2024-06-14',
                        finishProgress: 10,
                        costProgress: 20
                    },
                    {
                        milepostName: '数据建模',
                        startTime: '2024-06-13',
                        endTime: '2024-06-24',
                        finishProgress: 10,
                        costProgress: 20
                    },
                    {
                        milepostName: '试运行',
                        startTime: '2024-06-25',
                        endTime: '2024-07-14',
                        finishProgress: 10,
                        costProgress: 20
                    },
                    {
                        milepostName: '正式运行',
                        startTime: '2024-07-15',
                        endTime: '2024-08-14',
                        finishProgress: 10,
                        costProgress: 20
                    }
                ]
            },
            {
                id: 2,
                productName: '项目2',
                children: [
                    // 这里是表格进度了
                    {
                        milepostName: '准备工作', // 类型： 准备工作、启动工作、数据预处理等八个枚举
                        startTime: '2024-05-01',
                        endTime: '2024-06-02',
                        finishProgress: 80,
                        costProgress: 120,
                        alterEndTime: '2024-06-08' //可以为空
                    },
                    {
                        milepostName: '启动工作',
                        startTime: '2024-05-04',
                        endTime: '2024-06-03',
                        finishProgress: 80,
                        costProgress: 110,
                        alterEndTime: '2024-06-06'
                    },
                    {
                        milepostName: '数据预处理',
                        startTime: '2024-05-30',
                        endTime: '2024-06-12',
                        finishProgress: 10,
                        costProgress: 30
                    },
                    {
                        milepostName: '产品确认',
                        startTime: '2024-05-31',
                        endTime: '2024-06-14',
                        finishProgress: 10,
                        costProgress: 20
                    },
                    {
                        milepostName: '数据建模',
                        startTime: '2024-06-13',
                        endTime: '2024-06-24',
                        finishProgress: 10,
                        costProgress: 20
                    },
                    {
                        milepostName: '试运行',
                        startTime: '2024-06-25',
                        endTime: '2024-07-14',
                        finishProgress: 10,
                        costProgress: 20
                    },
                    {
                        milepostName: '正式运行',
                        startTime: '2024-07-15',
                        endTime: '2024-08-14',
                        finishProgress: 10,
                        costProgress: 20
                    }
                ]
            }
        ],

        dateList: [
            { date: '2024-04', days: 30 },
            { date: '2024-05', days: 31 },
            { date: '2024-06', days: 30 }
        ],
        currentDayStyle: {}
    })

    onMounted(() => {
        const day = moment().diff(moment(state.dateList[0].date), 'days')
        state.currentDayStyle = {
            left: `${30 * day}px`
        }
        nextTick(() => {
            const middle = document.querySelector('.date-wrapper').clientWidth / 2
            document.querySelector('.date-wrapper').scrollLeft = 30 * day - middle
        })
    })
    // 格式化
    const computedClass = (index, item, record, projectItem, projectIndex) => {
      const day = item < 10 ? `0${item}` : item
      const currentCell = moment(`${record}-${day}`).format('YYYY-MM-DD')
      const dataIndex = (index - 1) % 4
      if (dataIndex === 0) {
        return {
          className: currentCell === moment().format('YYYY-MM-DD') ? 'today' : ''
        }
      }

      let className = ''
      let text = ''
      let colspan = 1
      if (index === 2) {
        // return formatData(index, 2, projectIndex, 'ready', currentCell)
        if (
          moment(currentCell).isBetween(
            state.list[projectIndex].children[0].startTime,
            state.list[projectIndex].children[0].endTime,
            undefined,
            '[]'
          )
        ) {
          className = 'ready'
        }
        if (state.list[projectIndex].children[0].alterEndTime) {
          // 将endTime后移一天以开始change类
          const dayAfterEndTime = moment(state.list[projectIndex].children[0].endTime).add(1, 'days')
          if (
            moment(currentCell).isSameOrAfter(dayAfterEndTime, 'day') &&
            moment(currentCell).isSameOrBefore(state.list[projectIndex].children[0].alterEndTime, 'day')
          ) {
            className = 'change'
          }
        }
      }

      //  准备中完成进度
      if (index === 3) {
        const subs =
          moment(state.list[projectIndex].children[0].endTime).diff(
            state.list[projectIndex].children[0].startTime,
            'days'
          ) + 1 // 加1来包括起始和结束日
        // 完成进度应该占比多少格子
        const realDays = subs * (state.list[projectIndex].children[0].finishProgress / 100)
        const finish = Math.round(realDays) // 根据实际情况选择向上或向下取整
        // 完成进度的时间
        const finishDate = moment(state.list[projectIndex].children[0].startTime)
          .add(finish, 'days')
          .format('YYYY-MM-DD')
        const finishendTime = moment(finishDate).isAfter(state.list[projectIndex].children[0].endTime)
          ? state.list[projectIndex].children[0].endTime
          : finishDate
        if (
          moment(currentCell).isBetween(
            state.list[projectIndex].children[0].startTime,
            finishendTime,
            undefined,
            '[]'
          )
        ) {
          className = currentCell === state.list[projectIndex].children[0].startTime ? 'finish' : 'finish empty'
          colspan = currentCell === state.list[projectIndex].children[0].startTime ? finish + 1 : 1
          if (
            Number(currentCell.split('-')[1]) >
            Number(state.list[projectIndex].children[0].startTime.split('-')[1])
          ) {
            className = 'finish'
          }
          // text = currentCell === state.list[projectIndex].children[0].startTime ? `完成进度：${state.list[projectIndex].children[0].finishProgress}%` : ''
          text =
            currentCell === state.list[projectIndex].children[0].startTime
              ? `${state.list[projectIndex].children[0].finishProgress}%`
              : ''
        }
      }
      // 准备工作成本进度
      if (index === 4) {
        // 开始时间和结束时间相差多少天
        const subs = moment(state.list[projectIndex].children[0].endTime).diff(
          state.list[projectIndex].children[0].startTime,
          'day'
        )
        console.log(subs, '开始和结束总时间',projectIndex,'projectIndex')
        // 成本进度应该占比多少格子
        const finish = Math.ceil(subs * (state.list[projectIndex].children[0].costProgress / 100));

        console.log(finish, '成本进度占得百分比',projectIndex,'projectIndex')
        // 成本进度的时间
        const finishDate = moment(state.list[projectIndex].children[0].startTime)
          .add(finish, 'days')
          .format('YYYY-MM-DD')
        console.log(finishDate, '成本进度时间格式化',projectIndex,'projectIndex')
        if (
          moment(currentCell).isBetween(
            state.list[projectIndex].children[0].startTime,
            finishDate,
            undefined,
            '[]'
          )
        ) {
          className = currentCell === state.list[projectIndex].children[0].startTime ? 'cost' : 'cost empty'
          // colspan = currentCell === state.list[projectIndex].children[0].startTime ? (state.list[projectIndex].children[0].costProgress > 100 ? subs : finish + 1) : 0;
          colspan = currentCell === state.list[projectIndex].children[0].startTime ? finish + 1 : 1
          if (
            Number(currentCell.split('-')[1]) >
            Number(state.list[projectIndex].children[0].startTime.split('-')[1])
          ) {
            className = 'cost'
          }
          text =
            currentCell === state.list[projectIndex].children[0].startTime
              ? `${state.list[projectIndex].children[0].costProgress}%`
              : ''
        }
      }
      // 启动工作

      // if (index === 6) {
      //     if (
      //         moment(currentCell).isBetween(
      //             state.list[projectIndex].children[1].startTime,
      //             state.list[projectIndex].children[1].endTime,
      //             undefined,
      //             '[]'
      //         )
      //     ) {
      //         className = 'start'
      //     }
      //     if (state.list[projectIndex].children[1].alterEndTime) {
      //         // 将endTime后移一天以开始change类
      //         const dayAfterEndTime = moment(state.list[projectIndex].children[1].endTime).add(1, 'days')
      //         if (
      //             moment(currentCell).isSameOrAfter(dayAfterEndTime, 'day') &&
      //             moment(currentCell).isSameOrBefore(state.list[projectIndex].children[1].alterEndTime, 'day')
      //         ) {
      //             className = 'change'
      //         }
      //     }
      // }
      //
      // //  启动工作完成进度
      // if (index === 7) {
      //     const subs =
      //         moment(state.list[projectIndex].children[1].endTime).diff(
      //             state.list[projectIndex].children[1].startTime,
      //             'days'
      //         ) + 1 // 加1来包括起始和结束日
      //     // 完成进度应该占比多少格子
      //     const realDays = subs * (state.list[projectIndex].children[1].finishProgress / 100)
      //     const finish = Math.round(realDays) // 根据实际情况选择向上或向下取整
      //     // 完成进度的时间
      //     const finishDate = moment(state.list[projectIndex].children[1].startTime)
      //         .add(finish, 'days')
      //         .format('YYYY-MM-DD')
      //     const finishendTime = moment(finishDate).isAfter(state.list[projectIndex].children[1].endTime)
      //         ? state.list[projectIndex].children[1].endTime
      //         : finishDate
      //     if (
      //         moment(currentCell).isBetween(
      //             state.list[projectIndex].children[1].startTime,
      //             finishendTime,
      //             undefined,
      //             '[]'
      //         )
      //     ) {
      //         className = currentCell === state.list[projectIndex].children[1].startTime ? 'finish' : 'finish empty'
      //         colspan = currentCell === state.list[projectIndex].children[1].startTime ? finish + 1 : 1
      //         if (
      //             Number(currentCell.split('-')[1]) >
      //             Number(state.list[projectIndex].children[1].startTime.split('-')[1])
      //         ) {
      //             className = 'finish'
      //         }
      //         // text = currentCell === state.list[projectIndex].children[1].startTime ? `完成进度：${state.list[projectIndex].children[1].finishProgress}%` : ''
      //         text =
      //             currentCell === state.list[projectIndex].children[1].startTime
      //                 ? `${state.list[projectIndex].children[1].finishProgress}%`
      //                 : ''
      //     }
      // }
      // // 启动工作成本进度
      // if (index === 8) {
      //     // 开始时间和结束时间相差多少天
      //     const subs = moment(state.list[projectIndex].children[1].endTime).diff(
      //         state.list[projectIndex].children[1].startTime,
      //         'day'
      //     )
      //     // 成本进度应该占比多少格子
      //     const finish =
      //         state.list[projectIndex].children[1].costProgress > 100
      //             ? subs
      //             : Math.ceil(state.list[projectIndex].children[1].costProgress / subs)
      //
      //     // 成本进度的时间
      //     const finishDate = moment(state.list[projectIndex].children[1].startTime)
      //         .add(finish, 'days')
      //         .format('YYYY-MM-DD')
      //     if (
      //         moment(currentCell).isBetween(
      //             state.list[projectIndex].children[1].startTime,
      //             finishDate,
      //             undefined,
      //             '[]'
      //         )
      //     ) {
      //         className = currentCell === state.list[projectIndex].children[1].startTime ? 'cost' : 'cost empty'
      //         // colspan = currentCell === state.list[projectIndex].children[1].startTime ? (state.list[projectIndex].children[1].costProgress > 100 ? subs : finish + 1) : 0;
      //         colspan = currentCell === state.list[projectIndex].children[1].startTime ? finish + 1 : 1
      //         if (
      //             Number(currentCell.split('-')[1]) >
      //             Number(state.list[projectIndex].children[1].startTime.split('-')[1])
      //         ) {
      //             className = 'cost'
      //         }
      //         text =
      //             currentCell === state.list[projectIndex].children[1].startTime
      //                 ? `${state.list[projectIndex].children[1].costProgress}%`
      //                 : ''
      //     }
      // }

      if (currentCell === moment().format('YYYY-MM-DD')) {
        className += ' today'
      }
      return { className, text, colspan }
    }
    function formatData(index, currIndex, projectIndex, type, currentCell) {
    }

    function getTableData() {
        post('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/search', {}).then(data => {
            console.log(data)
        })
    }
    getTableData()
</script>
<style scoped>
    .flex {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        height: 30px;
    }

    .list {
        height: 600px;
    }

    .product-wrapper {
        width: 200px;
        box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.3); /* Right shadow */
        border-left: 1px solid #d9d9d9;
    }

    .flex-1 {
        flex: 1;
        overflow: auto;
    }

    .date-item {
        width: 30px;
        height: 30px;
        position: relative;
        border: 1px solid #eaeaea;
        line-height: 30px;
        &.header {
            border: 1px solid;
        }
    }
    .content-item {
        width: 30px;
        height: 13px;
        position: relative;
        border: 1px solid #eaeaea;
        &.header {
            border: 1px solid;
        }
    }

    .date-info {
        text-align: center;
    }

    /* 颜色 */
    .ready {
        background-color: #fbe69a;
    }

    .start {
        background-color: #fdf58c;
    }
    .preprocessing {
        background-color: #d4f261;
    }
    .confirm {
        background-color: #87e9de;
    }
    .modeling {
        background-color: #90cbff;
    }
    .test-run {
        background-color: #ffadd3;
    }
    .run {
        background-color: #d3adf7;
    }
    .finish {
        background-color: #6d91f7;
    }

    .cost {
        background-color: #b668f7;
    }

    .empty {
        display: none;
    }

    .today {
        border-right: 1px solid #4874f6;
    }

    .current-day {
        background-color: #4874f6;
        color: #fff;
        position: absolute;
        width: 36px;
        height: 21px;
        line-height: 21px;
        textalign: center;
        background: #3875ff;
        letterspacing: 0;
        borderradius: 2px;
        fontsize: 14px;
        text-align: center;
    }

    .table-text {
        position: absolute;
        left: 10px;
        top: -6px;
        min-width: 202px;
        text-align: left;
        color: #fff;
        z-index: 999;
    }

    .change {
        background-color: #ff2a00;
    }
    .date-title {
        text-align: center;
        background: rgba(56, 117, 255, 0.2);
        height: 30px;
        line-height: 30px;
        border-right: #bfbfbf 1px solid;
    }
    .table-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        text-align: center;
        height: 60px;
        line-height: 60px;
        background: rgba(56, 117, 255, 0.2);
    }
    .bgcolor {
        background: rgba(56, 117, 255, 0.2);
    }
</style>
